<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>

    <style>

        .demo{
            display: flex;
            flex-direction: column;
            background-color: antiquewhite;
            justify-content: center;
            align-items: center;
        }



    </style>
</head>
<body>

<div id="app" class="demo">

    <a v-for="item in emojiList"> {{item.icon}}</a>

    <input v-model = "message" placeholder="edit me" align="center">

    <p>{{ emojiList[message.length - 1].icon }}</p>

    <button @click="changeEmoji">change emoji</button>

    <p>{{emoji}}</p>

</div>

<script>

    const app = Vue.createApp({

        // data选项是一个函数，Vue创建新组件实例的过程中调用此函数。
        data() {

            // 返回一个对象，Vue通过响应性系统将其包裹起来，并以$data的形式存储在组件实例当中
            return{

                message:'1',
                count:4,
                emoji:'💖',
                emojiList:[
                    {
                        id:1,
                        text:'angry',
                        icon:'🤯'
                    },
                    {
                        id:2,
                        text:'guffaw',
                        icon:'😀'
                    },
                    {
                        id:3,
                        text:'weep',
                        icon:'😭'
                    },
                    {
                        id:4,
                        text:'sunglasses',
                        icon:'😎'
                    },
                    {
                        id:5,
                        text:'sweat',
                        icon:'😥'
                    },
                ]
            }
        },

        methods: {
            increment() {
                this.count++;
            },
            changeEmoji() {
                const randomIndex = Math.floor(Math.random() * this.emojiList.length);
                this.emoji = this.emojiList[randomIndex].icon
            }
        }
    }).mount('#app')

</script>

</body>
</html>